<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*  常见宽高度
        1.可视区域宽高clientHeight clientWidth(不包含边框)
        clientLeft、clientTop：获取元素内容到边框的距离，效果和边框宽度相同，很少使用
        clientWidth：获取元素自身的宽度（不含边框）
        clientHeight：获取元素自身的高度（不含边框
        2.含有滚动条时的内容宽高
        scrollLeft ：设置和获取当前左滚动的距离，即左卷的距离；
        scrollTop：设置和获取当前上滚的距离，即上卷的距离；
        scrollHeight：获取对象可滚动的总高度；
        scrollWidth：获取对象可滚动的总宽度；
        3.offset(包含边框)*******
        offsetLeft：获取对象左侧与父级之间的距离（默认是body）
        offsetTop：获取对象上册与父级之间的距离（默认是body）
        offsetWidth：获取元素自身的宽度（包含边框）
        offsetHeight：获取元素自身的高度（包含边框）
         */
      .content-box {
        /* content = 100px * 100px */
        /*标准盒模型内容区为 width*/
        /* 宽高度计算=width+padding+border  120px 120px*/
        box-sizing: content-box; /*标准盒模型*/
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid black;
        overflow-y: scroll;
      }
      .border-box {
        /* content = (100-2*10-2*2)px * (100-2*10-2*2)px */
        /* IE和模型内容区为 width-padding */
        /* 宽高度计算=width 100px 100px */
        box-sizing: border-box; /*IE模型*/
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="content-box"></div>
    <div class="border-box"></div>
  </body>
</html>
